<style scoped>
    .goods{
        text-align: left;
    }
    .goods div{
        float:left;
    }
    .goods img{
        width:50px;
        height:50px;
    }
    .goods .info{
        margin-left:10px;
        text-align: left;
        line-height: 1.8;
    }
</style>
<template>
    <div class="page-container">
        <div class="grid-container">
            <a-row type="flex" class="grid-table-tool">
                <a-col :span="18" :order="1" class="tool-action">
                    <a-input-search placeholder="商品名称/编码" v-model="params.key" @search="onSearch" style="width:300px;margin-right:5px;"></a-input-search>
                    <a-button icon="search" type="primary">筛选</a-button>
                </a-col>
                <a-col :span="6" :order="2" class="tool-pagination">
                    <a-button type="default" icon="left" @click="onBack">返回</a-button>
                    <a-button type="primary" icon="plus" @click="onAdd">新增</a-button>
                </a-col>
            </a-row>
            <a-table bordered :columns="columns" :dataSource="dataList" :pagination="false" :loading="loading" :rowKey="record => record.id" size="middle">
                <template slot="index" slot-scope="text,record,index">
                    {{index+1}}
                </template>
                <template slot-scope="text,record" slot="name">
                    <div class="goods clearfix">
                        <div>
                            <img v-if="record.mainImage && record.mainImage!='' " :src="record.mainImage" />
                            <img v-else src="../../assets/images/nogoods.png" />
                        </div>
                        <div class="info">
                            <p>{{record.goodsName}}</p>
                            <p>{{record.goodsCode}}</p>
                        </div>
                    </div>
                </template>
                <template slot="price" slot-scope="text,record">
                    {{fmMoney(record.minPrice,2,true) + (record.specSize>1?" ~ "+fmMoney(record.maxPrice,2):'')}}
                </template>
                <template slot="total" slot-scope="text,record">
                    <p style="font-weight: bolder">{{fmMoney(record.saleCount,0)}}</p>
                    <p style="font-weight: bolder">{{fmMoney(record.saleAmount,2,true)}}</p>
                </template>
                <template slot="operation" slot-scope="text,record">
                    <a @click="onDeleted(record.id)"  class="ant-btn-text"><a-icon type="delete" /></a>
                </template>
            </a-table>
        </div>
        <a-modal title="选择商品" v-model="goodsVisible" :footer="null" width="800px" class="selection-modal">
            <select-goods-list v-if="goodsVisible" checkedType="checkbox" @result="emitGoods"></select-goods-list>
        </a-modal>
    </div>
</template>
<script>
    import {findGoodsList,addGoods,deletedGoods} from "../../api/activity";
    import {fmMoney} from "../../utils/index";
    import SelectGoodsList from "../../components/SelectGoods/index";

    const columns = [
        {title: '序号', dataIndex: 'index',width: 60,align:'center',scopedSlots: { customRender: 'index' }},
        {title: '商品名称',dataIndex: 'name',scopedSlots: { customRender: 'name' }},
        {title: '商品分类',dataIndex: 'typeName',width: 180,align:'center'},
        {title: '单位',dataIndex: 'unitName',width: 80,align:'center'},
        {title: '售价',dataIndex: 'price',width: 200,align:'right',scopedSlots: { customRender: 'price' }},
        {title: '操作',key: 'operation',align:'center',width: 100,scopedSlots: { customRender: 'operation' }}];
    export default {
        components:{SelectGoodsList},
        data() {
            return {
                columns,
                dataList: [],
                typeList:[],  //分类列表
                params:{
                    key:'',
                    activityId:undefined
                },
                total:0,
                loading:false,
                goodsVisible:false
            }
        },
        methods: {
            fmMoney,
            onBack(){
                this.$router.push('/activityList')
            },
            onSearch(){
                this.params.current = 1;
                this.onLoad();
            },
            onChange(current){
                this.params.current = current;
                this.onLoad();
            },
            //编辑
            onAdd(){
                this.goodsVisible = true;
            },
            async emitGoods(result){
                if(result != null){
                    let ids = []
                    result.map(m=>{
                        if(this.dataList.findIndex(g=>g.goodsId==m.id) == -1){
                            ids.push(m.id)
                        }
                    })
                    if(ids.length == 0) {
                        this.$message.success('添加成功')
                        return;
                    }
                    let resp = await addGoods({activityId: this.params.activityId, ids: ids})
                    if (this.qUtil.validResp(resp)) {
                        this.$message.success('添加成功')
                        this.onLoad()
                    } else {
                        this.$message.error(resp.errMsg || '添加失败')
                    }

                }
                this.goodsVisible = false
            },
            //删除
            async onDeleted(id){
                let resp = await deletedGoods(id);
                if(this.qUtil.validResp(resp)) {
                    this.$message.success('删除成功');
                    this.onLoad();
                }
            },
            async onLoad(){
                this.loading = true;
                let resp = await findGoodsList(this.params);
                this.loading = false;
                console.log('===>',resp)
                if(this.qUtil.validResp(resp)){
                    this.total = resp.data.total;
                    this.dataList = resp.data.dataList;
                }
            }
        },
        mounted(){
            this.params.activityId = this.$route.query.activityId || undefined
            if(this.params.activityId != undefined) {
                this.onLoad();
            }
        }
    }
</script>
